<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>任务栏</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="openConsole">打开控制台</el-button>
        </div>
        <el-form :inline="true">
          <el-form-item label="登录地址">
            <el-input v-model="loginUrl" style="width: 200px" placeholder="请输入OA登录地址"></el-input>
          </el-form-item>
          <el-form-item label="驱动路径">
            <el-input v-model="job.driverPath" style="width: 200px" placeholder="请输入驱动路径"></el-input>
          </el-form-item>
          <el-form-item label="任务地址">
            <el-input v-model="jobUrl" style="width: 500px" placeholder="请输入需要执行的审批的地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-switch
              style="margin-right: 10px"
              v-model="job.headless"
              active-text="无头模式"
              inactive-text="正常模式">
            </el-switch>
            <el-button type="success" @click="loadJob">执行任务</el-button>
            <el-button type="danger" @click="msg = ''">清空消息</el-button>
          </el-form-item>
        </el-form>
        <div class="job-msg text item" v-if="msg">
          <div v-html="msg"></div>
        </div>
        <el-empty v-else description="暂无任务明细"></el-empty>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="审批节点" name="first">
            <el-card>
              <el-form label-width="100px">
                <el-form-item label="审批节点：" align="left">
                  {{job.name}}
                </el-form-item>
                <el-form-item label="审批人：" align="left">
                  <span v-if="job.userName">{{job.userName}}（{{job.userAccount}}）</span>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="审批意见" name="second">审批节点-需要不？？？？？？？</el-tab-pane>
          <el-tab-pane label="审批进度" name="third">审批进度-需要不？？？？？？？</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
  const {ipcRenderer} = require('electron')
  export default {
    name: 'Crawler',
    data() {
      return {
        msg: '',
        loading: false,
        code: '无',
        jobUrl: '',
        loginUrl: 'http://kfmy.shinyway.org:8084',
        activeName: 'first',
        job: {
          name: '',
          userAccount: '',
          userName: '',
          password: '',
          jobId: '',
          headless: false,
          jobType: '',
          driverPath: '/Users/shuaidongdong/soft_install/chromedriver/96.0.4664.45/chromedriver'
        }
      }
    },
    methods: {
      async start() {
        this.$message.success('开始启动爬虫任务');
        let param = {
          loginUrl: this.loginUrl,
          jobUrl: this.jobUrl.split("?")[0] + "?jobId=" + this.job.jobId,
          userName: this.job.userAccount,
          password: this.job.password,
          driverPath: this.job.driverPath,
          headless: this.job.headless
         // jobType: 'fl_llcp_bm'
        }
        ipcRenderer.send('request-worker-channel', param)
      },
      async loadJob() {
        let jobId = this.getQueryString(this.jobUrl, 'jobId')
        if (!jobId) {
          this.$message.error('任务地址不正确，无法获取任务编号')
          return
        }
        this.$http.get(`${this.loginUrl}/api4otherSys/getCurrentJob.do?jobId=${jobId}`).then(res => {

          let data = res.data.data;
          if (data.status === 4) {
            this.$message.error('该审批已结束');
            return;
          }

          this.$message.success('开始启动爬虫任务')
          this.job.name = data.jobName;
          this.job.userAccount = data.userAccount;
          this.job.userName = data.userName;
          this.job.password = data.password;
          this.job.jobId = data.jobId;
          this.start();
        }).catch(() => {
          this.$message.error('网络出错了')
        })
      },
      getQueryString: function (url, name) {
        if (!url) {
          return null
        }
        let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        let r = url.split('?')[1].match(reg)
        if (r != null) return unescape(r[2])
        return null
      },
      openConsole() {
        ipcRenderer.send('request-open-console')
      }
    },
    mounted() {
      let $this = this;
      ipcRenderer.on('provide-worker-channel', (e, msg) => {
        const [port] = e.ports
        console.log("渲染进程拿到了消息", msg)
        $this.msg += msg.msg + '<br>'
      })
    }
  }
</script>
<style scoped>
  .job-msg {
    max-height: 500px;
    overflow-y: scroll;
    text-align: left;
    padding: 20px;
  }

  .el-container, .el-card a:first-of-type {
    height: inherit;
  }
</style>
